<template>
	<div class="last">
		<div class="last-top">
				<img src="../../../public/grzx/pri-2.png" />
				<h4>精选推荐</h4>
				<img src="../../../public/grzx/pri-1.png" />
		</div>
		<div class="last-bottom">
			<ul>
				<li v-for="item in list" :key='item.id'>
					<img :src="item.imgURL" />
					<aside>{{item.name}}</aside>
					<p>{{item.msg}}</p>
					<label>￥{{item.price}}<span>起</span></label>
					<strong>{{item.day}}天<em>{{item.date}}</em>晚</strong>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'LastVue',
		data(){
			return{
				list:[ 
				    {id:1,imgURL:'grzx/pri-3.jpg',msg:"[三峡徒步]12月红叶季徒步圣地！漫步长江三峡，船行+徒步，从上帝视角俯瞰巴楚风韵，小众三峡流域轻装徒步穿越，避开人流，6日三峡秋景穿越之旅！",name:"户外游 | 宜昌出发",price:"2680",day:"6",data:"5"},
				    {id:2,imgURL:'grzx/pri-4.jpg',msg:"[田园靖西]11-3月暖冬季：南宁-通灵大峡谷-渠洋湖-靖西鹅泉-德天瀑布-明仕田园，4天3夜深度之旅！（批批入住明仕山庄）：",name:"美景探索 | 南宁出发",price:"1480",day:"4",data:"3"},
				    {id:3,imgURL:'grzx/pri-5.jpg',msg:"[北疆冬摄]12-2月新疆：雪国喀纳斯、水墨禾木，伊犁天鹅泉（天鹅+雾凇+晨雾），赛里木湖（蓝冰+冰泡+日出日落），伊宁人文，独山子大峡谷，乌尔禾魔鬼城，北疆摄影11日",name:"摄影游 | 乌鲁木齐出发",price:"2880",day:"7",data:"6"},
				    {id:4,imgURL:'grzx/pri-6.jpg',msg:"[冬游西藏 • 梦幻蓝冰A线]普莫雍措蓝冰-扎什伦布寺-珠峰大本营-喜马拉雅群山-多情措-羊卓雍措！★拉萨3晚四钻酒店，可自选升级洲际！去世界屋脊寻找“蓝精灵”！7日之旅",name:"美景探索 | 拉萨出发",price:"6680",day:"11",data:"10"},
				    {id:5,imgURL:'grzx/pri-7.jpg',msg:"[腾冲银杏]11-12月季节限定！固东银杏村-诺邓火腿-高黎贡轻徒步-小粒咖啡-热海大滚锅-和顺古镇，极边小城6日游（升级4钻温泉客栈，赠温泉体验）",name:"美景探索 | 大理出发",price:"2980",day:"6",data:"5"},
				    {id:6,imgURL:'grzx/pri-8.jpg',msg:"[三峡秋摄]11月秋色三峡红叶季火热！摄长江三峡秋景精华，三峡人家-大面山-巫山神女湾-夔门，从雄伟到柔情，7日摄影创作团！",name:"摄影游 | 宜昌出发",price:"3380",day:"7",data:"6"},
				    {id:7,imgURL:'grzx/pri-9.jpg',msg:"[征途·神农架]2021年无人区徒步，超越自我“无人之境”认识真正的自己！挑夫伴你行，轻装神农架穿越原始森林，露营高山草甸，冲顶老君山，4天3晚无人区穿越之旅！",name:"户外游 | ",price:"2580",day:"4",data:"3"},
				    {id:8,imgURL:'grzx/pri-10.jpg',msg:"[惊艳南京秋色·2人成行]人气优选，秋遇金陵，明孝陵黄金神道-止马岭水杉晨曦-栖霞山红枫林-颐和路梧桐-清凉山银杏，一网打尽隐秘秋色（3-4日/小车团-大巴车可选）",name:"美景探索 | 南京出发",price:"1690",day:"3",data:"4"}
				]
			}
		}
	}
</script>

<style scoped>
	.last{
		width: 100%;
		margin-bottom: 2rem;
	}
	.last .last-top{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1.12rem;
		background-color: #D3D3D3;
	}
	.last .last-top img{
		width: 0.5rem;
		height: 0.5rem;
	}
	.last .last-top h4{
		font-size: 0.4rem;
		font-weight: bold;
		padding: 0 0.1rem;
	}
	.last .last-bottom{
		position: relative;
		width: 100%;
	}
	.last .last-bottom ul{
		width: 100%;
		margin-top: 0rem;
	}
	.last .last-bottom ul li{
		position: relative;
		background-color: white;
		width: 46%;
		float: left;
		text-align: center;
		margin: 0.2rem 0.2rem;
	}
	.last .last-bottom ul li img{
		width: 100%;
		height: 2.5rem;
		border-radius: 0.1rem;
	}
	.last .last-bottom ul li aside{
		position: absolute;
		top: 0.2rem;
		left: 0.1rem;
		background-color: rgba(0,0,0,0.6);
		padding: 0.1rem 0.3rem 0.1rem 0.1rem;
		color: white;
		border-radius: 0 0.5rem 0.5rem 0;
	}
	.last .last-bottom ul li  p{
		overflow: hidden;
		height: 0.4rem;
		padding: 0.3rem 0.15rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.35rem;
	}
	.last .last-bottom ul li label{
		color: #ff7100;
		float: left;
		font-size: 0.35rem;
		padding: 0.3rem 0.3rem;
		font-weight: bold;
	}
	.last .last-bottom ul li label span{
		color: #808080;
	}
	.last .last-bottom ul li  strong{
		float: right;
		padding: 0.3rem 0.3rem;
		color: #808080;
	}
</style>
